<script lang="ts" setup>
import { ref, computed } from 'vue'
import listItem from './components/listItem.vue'
import { getExchangeRecordApi } from '@/services/my'
import { onLoad } from '@dcloudio/uni-app'
import { SwitchingTime } from '@/utils/tools'

const date = ref<string>('')
const params = ref({
  activitySignInsId: '',
  startTime: '',
  endTime: '',
})
const list = ref<any[]>([])
const qrcode = ref('')
const qrRef = ref()
const dateFormat = computed(() => {
  return !date.value ? '全部' : date.value.split('-').join('年') + '月'
})
/** 切换日期 */
const bindDateChange = (e: any) => {
  date.value = e.detail.value
  const time = date.value.split('-')
  params.value.startTime = SwitchingTime(new Date(+time[0], +time[1] - 1, 1).getTime())
  params.value.endTime = SwitchingTime(new Date(+time[0], +time[1], 0).setHours(23, 59, 59, 999))
  console.log('params', params.value)
  // listItemRef.value?.getRecordsList(date.value, typeValue.value)
  getList()
}
/**打开二维码弹窗 */
function openPopup(i: any) {
  qrcode.value = i.id
  qrRef.value?.open()
}
function getList() {
  getExchangeRecordApi({ ...params.value }).then((res) => {
    console.log(res)
    list.value = res.data ?? []
  })
}

onLoad((e: any) => {
  params.value.activitySignInsId = e.activitySignInsId
  getList()
})
</script>
<template>
  <view class="exchangeRecord">
    <picker mode="date" fields="month" class="custom-picker" :value="date" @change="bindDateChange">
      <view class="date">
        <view class="uni-input">{{ dateFormat }}</view>
        <text class="iconfont icon_arrow-left"></text>
      </view>
    </picker>
    <listItem v-if="list.length" :list="list" @openPopup="openPopup" />
    <view v-else class="noData">
      <image class="noDataImg" src="/static/images/Frame_288774.png" mode="scaleToFill" />
      <view class="noDataTips">您还没有产生记录哦~</view>
    </view>

    <BjsQrCodePopup ref="qrRef" :qrcodeUrl="qrcode" @refresh="getList" />
  </view>
</template>
<style lang="scss" scoped>
.exchangeRecord {
  width: 100vw;
  min-height: 100vh;
  background: #f6f6f6;
}
.date {
  display: flex;
  align-items: center;
  padding: 24rpx 0 22rpx 40rpx;
  .iconfont {
    margin-left: 10rpx;
    font-weight: bold;
    font-size: 24rpx;
  }
  color: rgba(0, 0, 0, 0.9);
  font-family: 'PingFang SC';
  font-size: 32rpx;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.noData {
  width: 100%;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  .noDataImg {
    width: 376rpx;
    height: 246rpx;
    margin: 340rpx auto 0;
  }
  .noDataTips {
    margin: 48rpx 0 0 0;
    color: rgba(0, 0, 0, 0.5);
    font-family: 'PingFang SC';
    font-size: 28rpx;
  }
}
</style>
